html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
font,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
dd,
dl,
dt,
li,
ol,
ul,
fieldset,
form,
label,
legend {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
}

img {
    border: none;
}

p {
    margin-bottom: 0;
}

body,
a,
input,
button {
    font-family: "Microsoft Yahei", "Droid Sans Fallback", "Arial", "Helvetica", "sans-serif", "宋体";
    font-size: 14px;
    outline: none;
    //  color: #666;
    text-decoration: none;
    margin: 0 auto;
}

body {
    background-color: #fff;
}

ul {
    list-style-type: none;
    padding: 0;
    margin: 0;
}

li {
    list-style-type: none;
    padding: 0;
    margin: 0;
}

a {
    color: #428bca;
}

a:hover {
    text-decoration: none;
}

table {
    text-align: center;
    vertical-align: middle;
}

th {
    text-align: center;
    vertical-align: middle;
}

::-webkit-input-placeholder {
    /* WebKit browsers */
   font-size: 0.2rem;
    color: #b3b3b3;
}

:-moz-placeholder {
    /* Mozilla Firefox 4 to 18 */
   font-size: 0.2rem;
    color: #b3b3b3;
}

::-moz-placeholder {
    /* Mozilla Firefox 19+ */
    color: #b3b3b3;
    font-size: 0.2rem;
}

:-ms-input-placeholder {
    /* Internet Explorer 10+ */
   font-size: 0.2rem;
    color: #b3b3b3;
}


/*通用*/

.flt {
    float: left;
}

.frt {
    float: right;
}

.clr {
    clear: both;
}

.mt5 {
    margin-top: 5px;
}

.mt10 {
    margin-top: 10px;
}

.mt15 {
    margin-top: 15px;
}

.mt20 {
    margin-top: 20px;
}

.mt5-i {
    margin-top: 5px ! important;
}

.mt10-i {
    margin-top: 10px ! important;
}

.mt15-i {
    margin-top: 15px ! important;
}

.mt20-i {
    margin-top: 20px ! important;
}

.mb5 {
    margin-bottom: 5px;
}

.mb10 {
    margin-bottom: 10px;
}

.mb15 {
    margin-bottom: 15px;
}

.mb20 {
    margin-bottom: 20px;
}

.mb5-i {
    margin-bottom: 5px ! important;
}

.mb10-i {
    margin-bottom: 10px ! important;
}

.mb15-i {
    margin-bottom: 15px ! important;
}

.mb20-i {
    margin-bottom: 20px ! important;
}

.ml5 {
    margin-left: 5px;
}

.ml10 {
    margin-left: 10px;
}

.ml15 {
    margin-left: 15px;
}

.ml20 {
    margin-left: 20px;
}

.ml5-i {
    margin-left: 5px ! important;
}

.ml10-i {
    margin-left: 10px ! important;
}

.ml15-i {
    margin-left: 15px ! important;
}

.ml20-i {
    margin-left: 20px ! important;
}

.mr5 {
    margin-right: 5px;
}

.mr10 {
    margin-right: 10px;
}

.mr15 {
    margin-right: 15px;
}

.mr20 {
    margin-right: 20px;
}

.mr5-i {
    margin-right: 5px ! important;
}

.mr10-i {
    margin-right: 10px ! important;
}

.mr15-i {
    margin-right: 15px ! important;
}

.mr20-i {
    margin-right: 20px ! important;
}

.pt5 {
    padding-top: 5px;
}

.pt10 {
    padding-top: 10px;
}

.pt15 {
    padding-top: 15px;
}

.pt20 {
    padding-top: 20px;
}

.pt5-i {
    padding-top: 5px ! important;
}

.pt10-i {
    padding-top: 10px ! important;
}

.pt15-i {
    padding-top: 15px ! important;
}

.pt20-i {
    padding-top: 20px ! important;
}

.pb5 {
    padding-bottom: 5px;
}

.pb10 {
    padding-bottom: 10px;
}

.pb15 {
    padding-bottom: 15px;
}

.pb20 {
    padding-bottom: 20px;
}

.pb5-i {
    padding-bottom: 5px ! important;
}

.pb10-i {
    padding-bottom: 10px ! important;
}

.pb15-i {
    padding-bottom: 15px ! important;
}

.pb20-i {
    padding-bottom: 20px ! important;
}

.pr5 {
    padding-right: 5px;
}

.pr10 {
    padding-right: 10px;
}

.pr15 {
    padding-right: 15px;
}

.pr20 {
    padding-right: 20px;
}

.pr5-i {
    padding-right: 5px ! important;
}

.pr10-i {
    padding-right: 10px ! important;
}

.pr15-i {
    padding-right: 15px ! important;
}

.pr20-i {
    padding-right: 20px ! important;
}

.pl5 {
    padding-left: 5px;
}

.pl10 {
    padding-left: 10px;
}

.pl15 {
    padding-left: 15px;
}

.pl20 {
    padding-left: 20px;
}

.pl5-i {
    padding-left: 5px ! important;
}

.pl10-i {
    padding-left: 10px ! important;
}

.pl15-i {
    padding-left: 15px ! important;
}

.pl20-i {
    padding-left: 20px ! important;
}

.block-center {
    display: block;
    margin-left: auto;
    margin-right: auto;
}

.fz12 {
    font-size: 12px ! important;
}

.fz14 {
    font-size: 14px ! important;
}

.fz16 {
    font-size: 16px ! important;
}

.fz18 {
    font-size: 18px ! important;
}

.pre {
    position: relative ! important;
}

.c-w {
    color: #fff;
}

.c-b {
    color: #000;
}

.c-9 {
    color: #999;
}

.c-6 {
    color: #666;
}

.c-3 {
    color: #333;
}

.c-w-i {
    color: #fff ! important;
}

.c-b-i {
    color: #000 ! important;
}

.c-9-i {
    color: #999 ! important;
}

.c-6-i {
    color: #666 ! important;
}

.c-3-i {
    color: #333 ! important;
}

.t-c {
    text-align: center;
}

.t-c-i {
    text-align: center ! important;
}

.l-c {
    vertical-align: middle;
}

.l-c-i {
    vertical-align: middle ! important;
}

.bz-bb {
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
}

.bz-cb {
    box-sizing: content-box;
    -moz-box-sizing: content-box;
    -webkit-box-sizing: content-box;
}

.bc-w {
    background: #fff;
}

.bc-w-i {
    background: #fff ! important;
}

.fw-in {
    font-weight: inherit ! important;
}

.fw-b {
    font-weight: bold;
}

.cs-p {
    cursor: pointer ! important;
}

.clearfix:after {
    content: "";
    display: block;
    clear: both;
}

.w1000 {
    width: 1000px;
    margin-left: auto;
    margin-right: auto;
}

.w1024 {
    width: 1024px;
    margin-left: auto;
    margin-right: auto;
}

.w900 {
    width: 900px;
    margin-left: auto;
    margin-right: auto;
}

//设置宽高
.wh(@w, @h) {
    width: @w;
    height: @h;
}

//定义margin值
.mt(@i) {
    margin-top: @i;
}

.ml(@i) {
    margin-left: @i;
}

.mr(@i) {
    margin-right: @i;
}

.mb(@i) {
    margin-bottom: @i;
}

.mc() {
    margin-left: auto;
    margin-right: auto;
}

//定义padding
.pt(@i) {
    padding-top: @i;
}

.pb(@i) {
    padding-bottom: @i;
}

.pl(@i) {
    padding-left: @i;
}

.pr(@i) {
    padding-right: @i;
}

//单行垂直居中
.hc(@i) {
    height: @i;
    line-height: @i;
}

//定义三角形
.ltne(@height, @color) {
    //向左
    border-right: @height solid @color;
    border-top: @height solid transparent;
    border-bottom: @height solid transparent;
}

.rtne(@height, @color) {
    //向右
    border-left: @height solid @color;
    border-top: @height solid transparent;
    border-bottom: @height solid transparent;
}

.ttne(@height, @color) {
    //向上
    border-bottom: @height solid @color;
    border-left: @height solid transparent;
    border-right: @height solid transparent;
}

.btne(@height, @color) {
    //向下
    border-top: @height solid @color;
    border-left: @height solid transparent;
    border-right: @height solid transparent;
}

//定义等腰三角形,底边宽度可自定义
.ltne(@height, @width, @color) {
    border-right: @height solid @color;
    border-top: @width/2 solid transparent;
    border-bottom: @width/2 solid transparent;
}

.rtne(@height, @width, @color) {
    border-left: @height solid @color;
    border-top: @width/2 solid transparent;
    border-bottom: @width/2 solid transparent;
}

.ttne(@height, @width, @color) {
    border-bottom: @height solid @color;
    border-left: @width/2 solid transparent;
    border-right: @width/2 solid transparent;
}

.btne(@height, @width, @color) {
    border-top: @height solid @color;
    border-left: @width/2 solid transparent;
    border-right: @width/2 solid transparent;
}

//可自由定义三角形三边长度
.ltne(@height, @width1, @width2, @color) {
    border-right: @height solid @color;
    border-top: @width1 solid transparent;
    border-bottom: @width2 solid transparent;
}

.rtne(@height, @width1, @width2, @color) {
    border-left: @height solid @color;
    border-top: @width1 solid transparent;
    border-bottom: @width2 solid transparent;
}

.ttne(@height, @width1, @width2, @color) {
    border-bottom: @height solid @color;
    border-left: @width1 solid transparent;
    border-right: @width2 solid transparent;
}

.btne(@height, @width1, @width2, @color) {
    border-top: @height solid @color;
    border-left: @width1 solid transparent;
    border-right: @width2 solid transparent;
}

//定义按钮常规样式
.btn(@w, @h, @r: 5px, @fz: 14px) {
    display: block;
    .wh(@w, @h);
    font: @fz/@h "microsoft yahei";
    text-align: center;
    text-decoration: none;
    border-radius: @r;
}

.btn(@w, @h, @r: 5px) {
    display: block;
    .wh(@w, @h);
    text-align: center;
    text-decoration: none;
    border-radius: @r;
}

.tm(@content) {
    transform: @content;
    -webkit-transform: @content;
    -o-transform: @content;
    -moz-transform: @content;
    -ms-transform: @content;
}

.blur(@s) {
    filter: blur(%(~"%apx", @s));
    -webkit-filter: blur(%(~"%apx", @s));
    -ms-filter: blur(%(~"%apx", @s));
    -moz-filter: blur(%(~"%apx", @s));
    filter: progid:DXImageTransform.Microsoft.Blur(PixelRadius=@s, MakeShadow=false);
}

//只有两个函数的情况,向底部渐变
.tlg(@cs, @ce) {
    /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#f0f9ff+0,a1dbff+100 */
    background: @cs;
    /* Old browsers */
    background: -moz-linear-gradient(top, @cs 0%, @ce 100%);
    /* FF3.6-15 */
    background: -webkit-linear-gradient(top, @cs 0%, @ce 100%);
    /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to bottom, @cs 0%, @ce 100%);
    /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr=%("%a", argb(@cs)), endColorstr=%("%a", argb(@ce)), GradientType=0);
}

.tlg(@cs, @cc1, @cc2, @ce...) {
    /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#4096ee+0,43cff9+100 */
    background: extract(@arguments, 1);
    /* Old browsers */
    background: -moz-linear-gradient(top, extract(@arguments, 1) extract(@arguments, 2), extract(@arguments, 3) extract(@arguments, 4), extract(@arguments, 5) extract(@arguments, 6), extract(@arguments, 7) extract(@arguments, 8));
    /* FF3.6-15 */
    background: -webkit-linear-gradient(top, extract(@arguments, 1) extract(@arguments, 2), extract(@arguments, 3) extract(@arguments, 4), extract(@arguments, 5) extract(@arguments, 6), extract(@arguments, 7) extract(@arguments, 8));
    /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to bottom, extract(@arguments, 1) extract(@arguments, 2), extract(@arguments, 3) extract(@arguments, 4), extract(@arguments, 5) extract(@arguments, 6), extract(@arguments, 7) extract(@arguments, 8));
    /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr=%("%a", argb(extract(@arguments, 1))), endColorstr=%("%a", argb(extract(@arguments, 7))), GradientType=0);
    /* IE6-9 */
}

//向左边渐变
.llg(@cs, @ce) {
    /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#f0f9ff+0,a1dbff+100 */
    background: @cs;
    /* Old browsers */
    background: -moz-linear-gradient(left, @cs 0%, @ce 100%);
    /* FF3.6-15 */
    background: -webkit-linear-gradient(left, @cs 0%, @ce 100%);
    /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to right, @cs 0%, @ce 100%);
    /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr=%("%a", argb(@cs)), endColorstr=%("%a", argb(@ce)), GradientType=1);
}

.llg(@cs, @cc1, @cc2, @ce...) {
    /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#4096ee+0,43cff9+100 */
    background: extract(@arguments, 1);
    /* Old browsers */
    background: -moz-linear-gradient(left, extract(@arguments, 1) extract(@arguments, 2), extract(@arguments, 3) extract(@arguments, 4), extract(@arguments, 5) extract(@arguments, 6), extract(@arguments, 7) extract(@arguments, 8));
    /* FF3.6-15 */
    background: -webkit-linear-gradient(left, extract(@arguments, 1) extract(@arguments, 2), extract(@arguments, 3) extract(@arguments, 4), extract(@arguments, 5) extract(@arguments, 6), extract(@arguments, 7) extract(@arguments, 8));
    /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to right, extract(@arguments, 1) extract(@arguments, 2), extract(@arguments, 3) extract(@arguments, 4), extract(@arguments, 5) extract(@arguments, 6), extract(@arguments, 7) extract(@arguments, 8));
    /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr=%("%a", argb(extract(@arguments, 1))), endColorstr=%("%a", argb(extract(@arguments, 7))), GradientType=0);
    /* IE6-9 */
}

//径向渐变
.rg(@cs, @ce) {
    /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#f0f9ff+0,a1dbff+100 */
    background: @cs;
    /* Old browsers */
    background: -moz-radial-gradient(center, ellipse cover, @cs 0%, @ce 100%);
    /* FF3.6-15 */
    background: -webkit-radial-gradient(center, ellipse cover, @cs 0%, @ce 100%);
    /* Chrome10-25,Safari5.1-6 */
    background: radial-gradient(ellipse at center, @cs 0%, @ce 100%);
    /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr=%("%a", argb(@cs)), endColorstr=%("%a", argb(@ce)), GradientType=1);
}

.ab() {
    content: "";
    display: block;
}

.clr() {
    &:after {
        .ab();
        clear: both;
    }
}

input:-moz-placeholder {
    /* Mozilla Firefox 4 to 18 */
    color: #b3b3b3;
    opacity: 1;
}

input::-moz-placeholder {
    /* Mozilla Firefox 19+ */
    color: #b3b3b3;
    opacity: 1;
}

input:-ms-input-placeholder {
    color: #b3b3b3;
    opacity: 1;
}

input::-webkit-input-placeholder {
    color: #b3b3b3;
    opacity: 1;
}

//body,html{
//  width: 100%;
//}
.re(@width) {
    @xs: 100px/(640px/@width);
    @media (max-width: (@width + 1px)) {
        html {
            font-size: @xs;
        }
        header,
        body{
            width: 100%;
        }
        footer,
        body
        {
            width: 100%;
        }
    }
    @media (min-width:(640px + 2px)) {
        html {
            font-size: 100px;
        }
        header,
        body{
            width: 640px;
        }
        footer,
        body{
            width: 640px;
        }
    }
}

.re(1600px);
.re(1440px);
.re(1280px);
.re(1024px);
.re(960px);
.re(950px);
.re(900px);
.re(800px);
.re(773px);
.re(768px);
.re(736px);
.re(732px);
.re(731px);
.re(667px);
.re(640px);
.re(600px);
.re(568px);
.re(533px);
.re(435px);
.re(414px);
.re(411px);
.re(384px);
.re(375px);
.re(360px);
.re(320px);